<template>
 <div class="container">
  <el-row type="flex" justify="center">
   <el-col :span="24" >
    <el-card class="box-card">
      <!-- 上面盒子 -->
     <div class="top" >
      <!-- 消息 -->
      <div class="msg">
        <div class="msg1" style="fontSize:12px;color:#ffc5da">说明:目前支持学科和关键字条件筛选</div>
      <el-button size="small"  icon="el-icon-edit" type="success" @click="$router.push('/questions/new')">新增试题</el-button>
      </div>
      <!-- 表单 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <!-- 第一行 -->
  <el-col :span="6">
    <el-form-item label="学科" label-width="70px">
    <el-select v-model="formInline.simple" placeholder="请选择" style="width:234px" @change="change1">
      <el-option v-for="item in simpleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      <!-- <el-option value="1">1</el-option>
      <el-option value="2">2</el-option>
      <el-option>3</el-option> -->
    </el-select>
  </el-form-item>
  </el-col>
  <el-col :span="6">
    <el-form-item label="二级目录" label-width="70px">
    <el-select v-model="formInline.simple1" placeholder="请选择" style="width:234px">
            <el-option v-for="item in simpleList3" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
 <el-col :span="6">
    <el-form-item label="标签" label-width="70px">
    <el-select v-model="formInline.simple2" placeholder="请选择" style="width:234px">
           <el-option v-for="item in simpleList2" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6">
     <el-form-item label="关键字" label-width="70px">
    <el-input v-model="formInline.user" placeholder="根据题干搜索" style="width:234px"></el-input>
  </el-form-item>
  </el-col>
<!-- 第二行 -->
<el-col :span="6">
    <el-form-item label="试题类型" label-width="70px">
    <el-select v-model="formInline.region1" placeholder="请选择" style="width:234px">
      <el-option label="单选" value="11"></el-option>
      <el-option label="多选" value="12"></el-option>
      <el-option label="简答" value="13"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
 <el-col :span="6">
    <el-form-item label="难度" label-width="70px">
    <el-select v-model="formInline.region2" placeholder="请选择" style="width:234px">
      <el-option label="简单" value="8"></el-option>
      <el-option label="一般" value="9"></el-option>
      <el-option label="困难" value="10"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6">
    <el-form-item label="方向" label-width="70px">
    <el-select v-model="formInline.region3" placeholder="请选择" style="width:234px">
      <el-option label="o2o" value="shanghai"></el-option>
      <el-option label="外包服务" value="1"></el-option>
      <el-option label="企业服务" value="2"></el-option>
      <el-option label="互联网金融" value="3"></el-option>
      <el-option label="企业咨询" value="4"></el-option>
      <el-option label="互联网" value="5"></el-option>
      <el-option label="电子商务" value="6"></el-option>
      <el-option label="其他" value="7"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
   <el-col :span="6">
     <el-form-item label="录入人" label-width="70px">
    <el-input v-model="formInline.user" placeholder="审批人" style="width:234px"></el-input>
  </el-form-item>
  </el-col>
  <!-- 第三行 -->
  <el-col :span="6">
    <el-form-item label="题目备注" label-width="70px">
    <el-input v-model="formInline.user1" placeholder="审批人" style="width:234px"></el-input>
  </el-form-item>
  </el-col>
 <el-col :span="6">
    <el-form-item label="企业简称" label-width="70px">
       <el-input v-model="formInline.user2" placeholder="审批人" style="width:234px"></el-input>
  </el-form-item>
  </el-col>
   <el-col :span="6">
    <el-form-item label="城市" label-width="70px">
    <el-select  @change="change2" v-model="formInline.city" placeholder="请选择" style="width:112px;margin-right:10px;" >
      <el-option v-for="(item,index) in provinces" :key="index" :label=item :value="item"></el-option>
      <!-- <el-option v-for="item in simpleList" :key="item.value" :label="item.label" :value="item.value"></el-option> -->

    </el-select>
    <el-select v-model="formInline.cityson" placeholder="请选择" style="width:112px">
      <el-option v-for="(item,index) in city" :key="index" :label=item :value="item"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
<el-col :span="6" style="display:flex;justify-content:flex-end">
  <el-form-item>
    <el-button>清除</el-button>
    <el-button type="primary"
    >搜索</el-button>
  </el-form-item>
</el-col>
</el-form>
     </div>
     <!-- 下面盒子 -->
  <div class="bottom">
    <!-- 审核 -->
    <el-tabs ref="tabs" type="card" @tab-click="init" v-model="iszhuang">
    <el-tab-pane label="全部"  name='youzhi'></el-tab-pane>
    <el-tab-pane label="待审核" name="0"></el-tab-pane>
    <el-tab-pane label="已审核" name="1"></el-tab-pane>
    <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
  </el-tabs>
  <!-- 消息提示 -->
  <el-alert
    type="info"
    show-icon>
      数据一共{{total}}条
  </el-alert>
  <!-- 表格 -->
  <el-table
    :data="initList"
    border
    style="width: 100%">
    <el-table-column
      prop="number"
      label="试题编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="120">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="120">
    </el-table-column>
    <el-table-column
      label="题型"
      width="120">
      <template v-slot="{row}">
         {{row.questionType==1?'单选':(row.questionType==2?'多选':'简答')}}
      </template>
    </el-table-column>
    <el-table-column

      label="题干"
      width="300">
      <template v-slot="{row}">
        <div v-html="row.question">

        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="addDate"
      label="录入时间"
      width="120">
    </el-table-column>
     <el-table-column
      label="难度"
      width="120">
      <template v-slot="{row}">
          {{row.difficulty=='1'?'简单':(row.difficulty=='2'?'一般':'困难')}}
      </template>
    </el-table-column>
     <el-table-column
      prop="creator"
      label="录入人"
      width="120">
    </el-table-column>
     <el-table-column
      width="120">
     <template v-slot="{row}">
       {{!row.chkState?'待审核':(row.chkState=='1'?'已审核':'已拒绝')}}
      </template>
    </el-table-column>
     <el-table-column
      prop="chkRemarks"
      label="审核意见"
      width="120">
    </el-table-column>
     <el-table-column
      prop="chkUser"
      label="审核人"
      width="120">
    </el-table-column>
     <el-table-column
      label="发布状态-"
      width="120">
      <template v-slot="{row}">
        {{row.publishState==1?'已发布':'未发布'}}
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label=""
      width="200">
      <template v-slot={row} >
        <el-button type="text" size="small" @click="hPreview(row.id)">预览</el-button>
        <el-button type="text" size="small" @click="hShenhe(row.id)" :disabled="!(row.chkState==0)">审核</el-button>
        <el-button type="text" size="small" :disabled="row.publishState===0?true:false" @click="$router.push('/questions/new')">修改</el-button>
        <el-button type="text" size="small" @click="shangxia(row.id,row.publishState)">{{row.publishState===0?'上架':'下架'}}</el-button>
           <!-- <el-popconfirm
    title="这是一段内容确定删除吗？"
    >
  <el-button slot="reference">删除</el-button>
    </el-popconfirm> -->
        <el-button @click="rm(row)" type="text" size="small" :disabled="row.publishState===0?false:true">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[3,5,10,20]"
      :page-size="pagesize"
      layout=" sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  <questionsPreview ref="hPreview" :id=id></questionsPreview>
  <questionsCheck @click="shuaxin" ref="hShenhe" :id=id></questionsCheck>
     <!-- 内容都写这里面 -->
    </el-card>
   </el-col>
  </el-row>
 </div>
</template>

<script>
// 路由导入

import { simple as simple1 } from '@/api/hmmm/directorys'
import { choice, choicePublish, remove } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { simple as simple2 } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys.js'
// import { simple } from '@/api/hmmm/directorys'
// 组件注册
import questionsCheck from '@/module-hmmm/components/questions-check.vue'
import questionsPreview from '../components/questions-preview1.vue'

export default {

  name: 'questions',
  components: {
    questionsPreview, questionsCheck
  },
  data () {
    return {
      provinces: [],
      // 表单相关
      formInline: {
        simple: '',
        simple2: '',
        city: '',
        cityson: '',
        simple1: ''
      },
      // 初始化数据
      initList: [],
      // 审核状态
      iszhuang: 'youzhi',
      // 页码相关
      total: 0,
      pagesize: 10,
      page: 1,
      id: 0,
      simpleList: [],
      simpleList2: [],
      simpleList3: [],
      city: []

    }
  },
  async created () {
    const res = await simple()
    // console.log(res)
    this.simpleList = res.data
    this.init2()
    this.provinces = provinces()
  },
  methods: {

    change2 () {
      this.formInline.cityson = ''
      this.city = citys(this.formInline.city)
    },
    async  change1 () {
      this.formInline.simple2 = ''
      this.formInline.simple1 = ''
      const res = await simple2({ subjectID: this.formInline.simple })
      // console.log(res)
      this.simpleList2 = res.data
      const res2 = await simple1({ subjectID: this.formInline.simple })
      this.simpleList3 = res2.data
    },
    rm (row) {
      this.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.init2()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    shangxia (id, publishState) {
      this.$confirm(`确认${publishState ? '下架' : '上架'}这道题目吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const publishState1 = publishState ? 0 : 1
        await choicePublish({ id: id, publishState: publishState1 })
        this.init2()
        this.$message({
          type: 'success',
          message: `${publishState ? '下架' : '上架'}成功!`
        })
      })
    },
    async init (tab) {
      if (tab?.paneName === 'youzhi') {
        const res = await choice({ page: this.page, pagesize: this.pagesize })
        this.initList = res.data.items
        this.total = res.data.counts
      } else {
        const res = await choice({ page: this.page, pagesize: this.pagesize, chkState: tab?.paneName })
        this.initList = res.data.items
        this.total = res.data.counts
      }
    },
    async init2 () {
      const res = await choice({ page: this.page, pagesize: this.pagesize })
      this.initList = res.data.items
      this.total = res.data.counts
      console.log(res)
    },
    shuaxin () {
      this.$refs.tabs.click()
    },
    hPreview (id) {
      this.id = id
      this.$nextTick(() => {
        this.$refs.hPreview.openDialog()
      })
    },
    hShenhe (id) {
      this.id = id
      this.$nextTick(() => {
        this.$refs.hShenhe.openDialog()
      })
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.init2()
    },
    handleCurrentChange (val) {
      this.page = val
      this.init2()
    }
  }
}
</script>

<style scoped lang='less'>
.container{
  .top{
    overflow: hidden;
    margin-bottom: 10px;
    .msg{
      display: flex;
      justify-content : space-between;
      padding-right: 10px;
      margin-bottom: 15px;
    }
  }
  .bottom{
   .xiaoxi{
      background-color: #ccc;
   }
  }

}
</style>
